<template>
	<div>
		<div class="swiper-box" :style="{width:swiperWidth+'rpx'}">
			<u-swiper :list="imgList" name="img" :height="swiperHeight" :border-radius="swiperRadius"></u-swiper>
			<block v-if="textList != ''">
				<div class="swiper-box-label">
					<div v-for="(item,index) in textList">
						<span class="iconfont" :class="item.iconfont"></span>
						<span class="text">{{item.text}}</span>
					</div>
					<!-- <div>
						<span class="iconfont icon-zhiliang"></span>
						<span class="pet-font12-bbb">正品保证</span>
					</div>
					<div>
						<span class="iconfont "></span>
						<span class="pet-font12-bbb">售后无忧</span>
					</div> -->
				</div>
			</block>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 图片数组
			imgList: {
				type: Array,
				default: () => []
			},
			// 轮播图高度
			swiperHeight: {
				type: Number,
				default: 300
			},
			// 是否开启下方文字列表
			textList: {
				type: Array,
				default: []
			},
			// 轮播图宽度
			swiperWidth: {
				type: String,
				default: null
			},
			// 轮播图圆角
			swiperRadius: {
				type: Number,
				default: 8
			},
			swiperShow:{
				type:Number,
				default:1
			}
		},
		mounted() {
			console.log(this.textList)
		}
	}
</script>

<style lang="scss">
	
	
	// 样式一
	.swiper-box {
		padding: 2.67vw 4.27vw 4.27vw;
		border-bottom: 0.27vw solid #F8F8F8;
		background-color: #fff;



		.swiper-box-label {
			margin-top: 2.13vw;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.text {
				color: #BBBBBB;
				font-size: 3.2vw;
				font-weight: 400;
			}

			.iconfont {
				color: #BBBBBB;
				position: relative;
				top: 0.47vw;
				right: 0.27vw;
			}
		}
	}

	
</style>
